<template>
    <div class="sub-app">
        <div draggable="true" 
            @click="goMain" 
            @touchstart="touchStart"  
            @touchmove="touchMove"
            @dragend="dragend"  
            @touchend="touchEnd"
            class="go-main" 
        >返回主页</div>
        
        <div 
            draggable="true" 
            @touchstart="touchStart"  
            @touchmove="touchMove"
            @dragend="dragend"  
            @touchend="touchEnd"
            class="selectBox" v-if="currentFrame !== 'yi-ri-zhi-ji-app'">
            当前框架：
            <select v-model="currentFrame"  @change="handleChange">
                <option v-for="item in frameType"  :value="item.value">{{ item.label }}</option>
            </select>
        </div>
        <div id="sub">
            <div class="loading">加载中...</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {onMounted,reactive,ref} from 'vue'
import { start,registerMicroApps } from 'qiankun';
import {microLoadConfig} from '../../qiankunConfig/index.js'
import {
    touchStart,
    touchMove,
    touchEnd
} from '../../components/mobileMoveableFunctions/index.ts'


const frameType = reactive([
    {
        label:'vue',
        value:'pc-vue'
    },
    {
        label:'react',
        value:'pc-react'
    },
    {
        label:'app',
        value:'app'
    },
    {
        label:'小程序',
        value:'weixin'
    },

])

const currentFrame = ref('')

onMounted(()=>{
     window.location.pathname.includes('/pc-vue') ? currentFrame.value = 'pc-vue' : 
            window.location.pathname.includes('/yi-ri-zhi-ji-app') ? currentFrame.value ='yi-ri-zhi-ji-app' : currentFrame.value ='pc-react'
    console.log('子应用加载--')
    registerMicroApps(microLoadConfig)
    start({
        prefetch:'all'
    })
})

const handleChange = (e) =>{
    switch(e.target.value){
        case 'app':
            window.open('http://39.105.220.189:8082', '_blank');
            break;
        case 'weixin':
            alert('请在微信中打开链接【https://open.weixin.qq.com/sns/getexpappinfo?appid=wx740308106a9adc8e&path=pages%2Findex%2Findex.html#wechat-redirect】，并申请访问')
            break;
        default:
            // router.push 执行时，在vue微服务下和 react微服务下，由于框架路由处理方式不同，导致 window.history 的值不同，导致跳转出错
            // 该函数不会重新加载全部资源
            history.pushState({},'',`/${e.target.value}/home`)
            // 会加载整个资源
            // window.location.href = `/${e.target.value}/home`
            break;
    }
}
const goMain = () => {
    history.pushState({},'',`/`)
}


const dragend = (e:DragEvent) => {
    console.log('dragend',e)
    e.target?.setAttribute('style',`top:${e.clientY}px;left:${e.clientX}px;`)
}

</script>


<style scoped lang="less">
.sub-app {
    position: relative;
    width: 100%;
    min-height:calc(100vh);
    .loading{
        height: 100vh;
        background-color:rgb(193, 193, 193);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        letter-spacing: 10px;
    }
}

.go-main{
    box-sizing: border-box;
    position: fixed;
    border-radius: 50%;
    background: rgb(113,182,188);
    color: white;
    width: 55px;
    height: 55px;
    top: 30vh;
    right: 15px;
    padding: 5px 10px;
    z-index: 1000;
    font-size: 14px;
}

.selectBox{
    box-sizing: border-box;
    position: fixed;
    background: #c8d4c5;
    color: #16221d;
    top: 10vh;
    width: 180px;
    right: 15px;

    padding: 5px 10px;
    z-index: 1000;
    font-size: 16px;
    select{
        font-size: 16px;
    }
}

</style>